<template>
	<view class="titobox">
		<tito title='个人中心' lefticon="left" @clickLeft="clickLeft" />
		<view class="box">
			<view class="text-img">
				<view class="text">
					头像:
				</view>
				<view class="img">
					<uni-file-picker @select="filePicker" limit="1" :del-icon="false" disable-preview
						:imageStyles="imageStyles" file-mediatype="image">
						<image class="picture-img" :src="userDate.logo" />
					</uni-file-picker>
				</view>
			</view>
			<view class="text-img">
				<view class="text">
					昵称
				</view>
				<view class="texts" @click="getName('昵称',userDate.name)">
					{{userDate.name}}
					<image class="texts-imgs" src="../static/xiugai.png" mode=""></image>
				</view>
			</view>
			<view class="text-img text-imgs">
				<view class="text">
					电话号码
				</view>
				<view class="texts" @click="getName('电话号码',userDate.mobile)">
					{{userDate.mobile || '请设置'}}
					<image class="texts-imgs" src="../static/xiugai.png" mode=""></image>
				</view>
			</view>
			<view class="text-img text-imgs" @click="getMyAddress">
				<view class="text">
					我的地址
				</view>
				<view class="texts">
					<uni-icons type="right" size="20" color="#B1B2B2"></uni-icons>
				</view>
			</view>
			<view class="text-img text-imgs" @click="getBankCard">
				<view class="text">
					我的银行卡
				</view>
				<view class="texts">
					<uni-icons type="right" size="20" color="#B1B2B2"></uni-icons>
				</view>
			</view>
			<view class="text-img text-imgs" @click="andLog">
				<view class="text">
					退出登录
				</view>
				<view class="texts">
					<uni-icons type="right" size="20" color="#B1B2B2"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
			<view class="Bluetooth">
				<view class="blue">
					{{valueCenter}}
				</view>
				<view class="text input">
					<input v-if="valueCenter == '昵称' " class="uni-input" placeholder="请输入昵称" v-model="name" />
					<input v-if="valueCenter == '电话号码' " type="number" maxlength="11" class="uni-input"
						placeholder="请输入电话号码" v-model="phone" />
				</view>
				<view class="text input" v-if="valueCenter == '电话号码' ">
					<input type="number" maxlength="11" class="uni-input"
						placeholder="验证码" v-model="mobileCode" />
					<text class="get_code" @click="countdown">{{code}}</text>
				</view>
				<view class="refuse-open">
					<view class="refuse" @click="$refs.popup.close()">
						取消
					</view>
					<view class="refuse open" @click="opens">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: null,
				phone: null,
				mobileCode:null,
				codeTimes: '',
				codeTime: '',
				codes: false,
				valueCenter: null,
				userDate: {},
				inputClearValue: "",
				code: '获取验证码',
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
			};
		},
		onShow() {
			this.sysUser()
		},
		methods: {
			andLog(){
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			//验证码
			countdown() {
				if(!this.phone) {
					return uni.showToast({
						title:"输入正确的手机号",
						icon:"none"
					})
				}
				if (this.codeTimes > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				} else {
					this.codes = false
					this.codeTimes = 6
					uni.showToast({
						title: '正在发送',
						icon: "none"
					});
					let timer = setInterval(() => {
						this.codeTimes--;
						if (this.codeTimes < 1) {
							this.codes = true
							clearInterval(timer);
							this.codeTime = "重新获取"
						}
						this.code = this.codes ? this.codeTime : this.codeTimes + 's'
					}, 1000)
					this.$request.get("/water-platform-app-api/customer/login/sendSms", {
						phone: this.phone,
						type: 2,
					}).then(res => {
						console.log(res, '验证码成功')
						uni.showToast({
							title: "发送成功",
							icon: "none"
						})
					})
				}
			},
			clickLeft() {
				uni.navigateBack()
			},
			getName(item, e) {
				this.name = e
				this.phone = e
				this.valueCenter = item
				this.$refs.popup.open('center')
			},
			logOff() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			//我的地址
			getMyAddress() {
				uni.navigateTo({
					url: "/subpackageA/pages/device/myAddress?myCenter=" + false
				})
			},
			//我的银行卡
			getBankCard(){
				uni.navigateTo({
					url:"/subpackageA/pages/my/bankCard"
				})
			},
			//获取用户信息
			sysUser() {
				this.$request.get("/water-platform-app-api/customer/customer/info").then(async res => {
					if (res.code == 0) {
						this.userDate = res.data
					}
				})
			},
			//修改名称和电话号码
			async opens() {
				if (this.valueCenter == "昵称") {
					await this.$request.get("/water-platform-app-api/customer/customer/updateNickname", {
								nickname: this.name
							},
							'application/json')
						.then(update => {
							if (update.code == 0) {
								uni.showToast({
									title: "修改昵称成功",
									icon: "none"
								})
							}
						})
				} else {
					await this.$request.get("/water-platform-app-api/customer/customer/updatePhone", {
								phone: this.phone,
								mobileCode: this.mobileCode
							},
							'application/json')
						.then(update => {
							if (update.code == 0) {
								uni.showToast({
									title: "修改电话号码成功",
									icon: "none"
								})
							}
						})
				}
				this.$refs.popup.close()
				this.sysUser()
			},
			//选择头像触发
			filePicker(e) {
				console.log(e, '----------');
				this.$uploadFile("/water-platform-app-api/ossUpload/save", e.tempFilePaths[0], "uploadImg").then(
					res => {
						if (res.state == "SUCCESS") {
							console.log(res.url, '--------');
							//修改头像
							this.$request.get("/water-platform-app-api/customer/customer/updatePhoto", {photo: res.url},
								'application/json').then(update => {
								console.log(update, 'updateupdate');
								if (update.code == 0) {
									this.sysUser()
									uni.showToast({
										title: "修改头像成功",
										icon: "none"
									})
								}
							})
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	.titobox {
		height: 100vh;
		background-color: #F5F7F7;
	}

	::v-deep .file-picker__box-content {
		border: none !important;
		width: 44px;
		height: 44px;
	}

	::v-deep .file-picker__progress {
		display: none;
	}

	.box {
		padding: 0 32rpx;
		box-sizing: border-box;

		.text-img {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #ECEEEE;

			.text {
				font-size: 28rpx;
				color: #141A18;
			}

			.texts {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #646665;

				.texts-imgs {
					width: 48rpx;
					height: 48rpx;
					margin-left: 10rpx;
				}
			}

			.img {
				margin-right: 30rpx;
			}

			.picture-img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
		}


		.text-imgs {
			border-bottom: none;
		}

		.text-login {
			width: 40%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			border: 1px solid #000;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 600rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.Bluetooth {
		width: 560rpx;
		background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%), #FFFFFF;
		border-radius: 40rpx;
		// text-align: center;
		padding: 32rpx 48rpx;
		box-sizing: border-box;

		.blue {
			font-size: 32rpx;
			color: #141A18;
			text-align: center;
		}

		.text {
			margin-top: 32rpx;
			font-size: 28rpx;
		}

		.input {
			padding: 10rpx 0rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #D7D8D8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.get_code{
				
			}
		}

		.refuse-open {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 48rpx;

			.refuse {
				width: 216rpx;
				height: 72rpx;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				border: 1rpx solid #D4E7FA;
				line-height: 72rpx;
				text-align: center;
			}

			.open {
				background-color: #D4E7FA;
				color: #000;
			}
		}
	}
</style>